<template>
   <div class="upload-container">
      <el-button :style="{background:color,borderColor:color}" icon="el-icon-upload" size="mini" type="primary"
                 @click=" dialogVisible=true">
         上传图片
      </el-button>
      <el-dialog :visible.sync="dialogVisible">
         <el-upload
            action="https://upload.qiniup.com/"
            :multiple="true"
            :file-list="fileList"
            :show-file-list="true"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :before-upload="beforeUpload"
            class="editor-slide-upload"
            list-type="picture-card"
            :data="uploadData"
         >
            <el-button size="mini" type="primary">
               点击上传
            </el-button>
         </el-upload>
         <el-button @click="dialogVisible = false" size="mini">
            取 消
         </el-button>
         <el-button type="primary" @click="handleSubmit" size="mini">
            确 定
         </el-button>
      </el-dialog>
   </div>
</template>

<script>
   import sassApi from "api/saasService";
   import common from "utils/common";

   export default {
      name: "EditorSlideUpload",
      props: {
         color: {
            type: String,
            default: "#1890ff"
         }
      },
      data() {
         return {
            dialogVisible: false,
            listObj: {},
            fileList: [],
            uploadData: {
               key: "",
               token: ""
            },

         };
      },
      methods: {
         checkAllSuccess() {
            return Object.keys(this.listObj).every(item => this.listObj[item].hasSuccess);
         },
         handleSubmit() {
            const arr = Object.keys(this.listObj).map(v => this.listObj[v]);
            if (!this.checkAllSuccess()) {
               this.$message("请等待所有图片上传成功 或 出现了网络问题，请刷新页面重新上传！");
               return;
            }
            this.$emit("successCBK", arr);
            this.listObj = {};
            this.fileList = [];
            this.dialogVisible = false;
         },
         handleSuccess(response, file) {
            const uid = file.uid;
            const objKeyArr = Object.keys(this.listObj);
            for (let i = 0, len = objKeyArr.length; i < len; i++) {
               if (this.listObj[objKeyArr[i]].uid === uid) {
                  this.listObj[objKeyArr[i]].url = "https://testqn.weilong1993.com/" + response.key;
                  this.listObj[objKeyArr[i]].hasSuccess = true;
                  return;
               }
            }
         },
         handleRemove(file) {
            const uid = file.uid;
            const objKeyArr = Object.keys(this.listObj);
            for (let i = 0, len = objKeyArr.length; i < len; i++) {
               if (this.listObj[objKeyArr[i]].uid === uid) {
                  delete this.listObj[objKeyArr[i]];
                  return;
               }
            }
         },
         beforeUpload(file) {
            const _self = this;

            const _URL = window.URL || window.webkitURL;
            const fileName = file.uid;
            _self.listObj[fileName] = {};
            new Promise((resolve, reject) => {
               const img = new Image();
               img.src = _URL.createObjectURL(file);
               img.onload = function () {
                  _self.listObj[fileName] = {
                     hasSuccess: false,
                     uid: file.uid,
                     width: this.width,
                     height: this.height
                  };
               };
               resolve(true);
            });

            let parts = file.name.split(".");
            let fileType = parts[parts.length - 1];
            return new Promise((resolve, reject) => {
               sassApi.getUploadToken().then(function (res) {
                  _self.uploadData.token = res.data;
                  _self.uploadData.key = common.getNowStr() + "." + fileType;
                  resolve(_self.uploadData);
               });
            });


         }
      }
   };
</script>

<style lang="scss" scoped>
   .editor-slide-upload {
      margin-bottom: 20px;
      /deep/ .el-upload--picture-card {
         width: 100%;
      }
   }
</style>
